<template>
    <div ref="chart" class="chart-container">
  
    </div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  import { getOrderList } from '../../api/account'
  
  const chart = ref(null)
  let xAxisData = ref([])
  let orderData = ref([])
  let amountData = ref([])
  
  const getOrder = async () => {
    try {
      const res = await getOrderList()
      console.log(res)
      xAxisData.value = res.xData
      orderData.value = res.orderData
      amountData.value = res.amountData
      console.log(xAxisData.value)
      initChart()
    } catch (error) {
      console.error('获取订单数据失败:', error)
    }
  }
  
  const initChart = () => {
    const myChart = echarts.init(chart.value)
    myChart.setOption({
      // 添加 legend 组件
      legend: {
        data: ['订单数据', '金额数据']
      },
      xAxis: {
        data: xAxisData.value
      },
      yAxis: {},
      series: [
        {
          name: '订单数据', // 为系列添加名称
          data: orderData.value,
          type: 'line',
          stack: 'x'
        },
        {
          name: '金额数据', // 为系列添加名称
          data: amountData.value,
          type: 'line',
          stack: 'x'
        }
      ]
    })
  }
  
  onMounted(() => {
    getOrder()
  })
  </script>
  
  <style lang="scss" scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
  </style>    